<template>
<div>
    <lab_head />
    <lab_header />

    <div class="container layout layout-margin-top">

        <ol class="breadcrumb">
            <li><a href="/courses/">全部课程</a></li>

            <li class="active">
                <a href="/courses/1">
                    {{ course.title }}
                </a>
            </li>
        </ol>

        <div class="row">
            <div class="col-md-9 layout-body">
                <div class="side-image side-image-mobile">
                    <img src="https://dn-simplecloud.shiyanlou.com/ncn1.jpg?imageView2/0/h/300">
                </div>
                <div class="content course-infobox">
                    <div class="clearfix course-infobox-header">
                        <h4 class="pull-left course-infobox-title">
                            <span>{{ course.title }}</span>|<span @click='dialogVisible=true'>购买课程</span>
                        </h4>
                        <div class="pull-right course-infobox-follow">
                            <span class="course-infobox-followers">{{course.follows}}</span>
                            <span>人关注</span>
                            <i v-if="follow_status==true" class="fa fa-star" @click="follow('0')"></i>
                            <i v-else class="fa fa-star-o" @click="follow('1')"></i>
                        </div>
                    </div>
                    <div class="clearfix course-infobox-body">
                        <div class="course-infobox-content">
                            <p>{{course.desc}}</p>
                            <img :src="course.img">
                        </div>
                        <div class="course-infobox-progress">

                        </div>

                        <div class="pull-right course-infobox-price">

                        </div>

                    </div>

                    <div class="clearfix course-infobox-footer">

                        <div class="pull-right course-infobox-learned">{{ course.follows }} 人学过</div>
                    </div>

                </div>
                <div class="content">
                    <div>
                        <Tabs :datas="types" v-model="type_selected" @change="change_type"></Tabs>
                    </div>
                    <div class="tab-content">
                        <!-- 实验列表 -->
                        <div v-if='type_selected=="list"'>
                            <div v-for="chap in chapter" :key="chap.id">
                                <div class="lab-item ">
                                    <h4 class="lab-item-title">第{{chap.chapter_num}}章---{{chap.title}}</h4>
                                </div>
                                <div class="lab-item change_curse" v-for="sect in chap.nodes" :key='sect.id'>
                                    <div class="lab-item-status">
                                        <img src="/static/img/lab-not-ok.png">
                                    </div>
                                    <div class="lab-item-index">第{{ chap.chapter_num }}节</div>
                                    <div class="lab-item-title">
                                        <a target="_blank" rel="noopener noreferrer">{{sect.title}}</a></div>
                                    <!-- <div class="pull-right lab-item-ctrl">
                    </div> -->
                                    <!-- </button> -->
                                </div>
                            </div>
                        </div>
                        <!-- 实验评论 -->
                        <div v-if='type_selected=="comment"'>
                            <div class="lab-item ">
                                <h4 class="lab-item-title">{{ course_list.name }} 实验评论</h4>
                            </div>
                            <div class="comment-box">
                                <div class="comment-form">
                                    <comment v-for="comment in comment_list" :key="comment.id" :comment='comment' :token='token' :ques_id='ques_id' :res='false' :is_son='"father"'></comment>
                                    <publish :token='token' :ques_id='ques_id'></publish>

                                </div>
                                <div class="comment-title">最新评论</div>
                                <div class="comment-list">
                                </div>
                                <div class="pagination-container"></div>
                            </div>
                        </div>
                        <!-- 实验报告 -->
                        <div v-if='type_selected=="report"'>
                            <div class="lab-item ">
                                <h4 class="lab-item-title">{{ course_list.name }} 实验报告</h4>
                            </div>
                            <div role="tabpanel" class="tab-pane active">
                                <div class="discovery-list">
                                    <div class="row report-items">
                                        <!-- 在这里循环遍历 -->
                                        <div class="col-md-3 report-item clearfix" v-for="(report,index) in reportlist" :key="index">
                                            <a href="/courses/reports/1255351">
                                                <div class="report-item-course">

                                                    {{ report.name }}
                                                </div>
                                                <div class="report-item-lab">第{{ report.sid }}章</div>

                                                <div class="report-item-count">
                                                    <span>{{ report.content | content_filter}} 字</span>
                                                    <div class="report-item-arrow">
                                                        <div class="report-item-arrow-line"></div>
                                                    </div>
                                                </div>
                                            </a>
                                            <div class="col-xs-8">
                                                <div class="report-item-author">

                                                    <div class="user-avatar report-item-avatar">
                                                        <a class="avatar" href="/user/350045" target="_blank">
                                                            <img :src="userphoto(report.photo)">
                                                        </a>

                                                    </div>

                                                    <div class="user-username ">
                                                        <a class="username" href="/user/350045" target="_blank">
                                                            {{ report.username }}
                                                            <span class="user-level">
                                                                <i>L</i>{{ report.exper | exper_filter }}
                                                            </span>
                                                        </a>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 实验问答 -->
                        <div v-if='type_selected=="course"'>
                            <div class="lab-item ">
                                <h4 class="lab-item-title">{{ course_list.name }} 实验问答</h4>
                            </div>
                            <a class="btn btn-success" data-toggle="modal" data-target="#askquestion">我要提问</a>
                            <hr>
                            <ul class="row question-items"></ul>
                            <div class="pagination-container"></div>
                        </div>
                    </div>
                </div>

            </div>

            <lab_sidebar :course_list='course_list' v-if='course_list'></lab_sidebar>
        </div>
    </div>

    <div>
        <el-dialog title="购买课程" :visible.sync="dialogVisible" width="50%">
            <p>购买:{{goods.title}} 课程</p>
            <p>支付方式: 支付宝</p>
            <p>价格: {{goods.price}}</p>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="pay">确 定</el-button>
            </span>
        </el-dialog>
    </div>
    <lab_footer />

</div>
</template>

<script>
import lab_head from './common/lab_head';
import lab_header from './common/lab_header';
import lab_footer from './common/lab_footer';
import user_info from './common/user_info';
import last_paths from './common/last_paths';
import QR_code from './common/QR_code';
import lab_sidebar from './common/lab_sidebar';
import comment from './common/comment';
import publish from './common/publish';
// getcourses1_get
import {
    getcourses1_get,
    goodscourses_get,
    payurl_post,
    get_chapterlist,
    follow_post,
    get_follow_get
} from './axios_api/api';

import {
    config,
    formatXml
} from '../config.js';
export default {
    components: {
        comment,
        lab_head,
        lab_header,
        lab_footer,
        user_info,
        last_paths,
        QR_code,
        lab_sidebar,
        publish,
    },
    data() {
        return {
            user_id: localStorage.getItem('uid'), //获取用户id
            follow_list: [], // 用户所以关注的课程
            dialogVisible: false, // 购买对话框
            goods: {
                id: '', // 商品id
                pay_type: '1', // 购买渠道, 1.普通, 2. 促销
                title: '', // 商品名字
                price: 0, // 价格
            }, // 商品数据
            id: 0, // 课程id
            course: {}, // 课程信息
            // 分类
            types: {
                list: '实验列表',
                comment: '实验评论',
                report: '实验报告',
                course: '实验问答',
            },
            type_selected: 'list',
            ques_id: 0,
            comment_list: [],
            course_list: [],
            //章节列表
            chapter: [],
            section_list: [],
            learn_list: [],
            token: '',
            reportlist: [],
        }
    },
    beforeMount() {},
    created() {},
    mounted() {

        this.id = this.$route.query.id // 课程id

        this.get_chapterinfo()
        console.log('this.id', this.id)
        this.get_course_info() // 取课程信息
        this.get_goods() // 取课程商品信息(普通销售渠道)
        this.get_follow() // 获取用户关注课程列表
    },
    // 计算属性
    computed: {
        // 课程关注状态
        follow_status() {

            let the = this.follow_list.find(item => item.curriculum == this.id)
            if (the) {
                return true
            } else {
                return false
            }
        },
    },
    methods: {
        //获取关注状态
        get_follow() {
            get_follow_get({
                user: this.user_id
            }).then(resp => {
                console.log('用户关注状态', resp)
                this.follow_list = resp.results
            })
        },
        //关注课程
        follow(action) {
            //发送用户id，课程id
            follow_post({
                cid: this.id,
                action: action
            }).then(resp => {
                console.log(resp)
                //重新获取关注状态
                this.get_follow()
                //重新获取课程信息
                this.get_course_info()
            })

        },

        //生成章节
        get_chapterinfo() {
            var course = this.id
            console.log('course,', course)
            let params = {
                'course': this.id,
            }
            console.log('章节', params)
            get_chapterlist(params).then(resp => {
                console.log(resp)
                this.chapter = resp.results
            })

        },

        // 生成订单, 获取支付链接

        pay() {
            console.log(this.goods.id)
            // goods_id: 课程id
            payurl_post({
                goods_id: this.goods.id
            }).then(resp => {
                console.log(resp)
                let pay_url = resp.data.pay_url
                window.location = pay_url
            })

        },
        // 获取商品数据
        get_goods() {
            let params = {
                'course': this.id,
                // 'pay_type': this.goods.pay_type,
                // 'is_launched': true
            }
            goodscourses_get(params).then((resp) => {
                console.log(resp)
                let the = resp.results[0]
                this.goods.id = the.id
                this.goods.title = the.title
                this.goods.price = the.price

            })
        },
        // 获取课程信息
        get_course_info() {
            getcourses1_get({
                id: this.id
            }).then(resp => {

                this.course = resp.results[0]
            })
        },
        // 用户头像
        userphoto(photo) {
            if (photo === '1.jpg') {
                return config['uploadurl'] + photo
            } else {
                return config['qiniuurl'] + photo
            }
        },
        collect_click(id) {
            this.$Message(id)
        },
        // 加载实验评论
        get_comments() {
            console.log('加载实验评论')
            var params = {
                type: 'comment',
                cid: this.id
            }
            get_questions_get(params).then(resp => {
                console.log(resp.data)
                this.ques_id = resp.data[0].id
                var params2 = {
                    ques_id: resp.data[0].id
                }
                // 已登录展示收藏情况
                var token = localStorage.getItem('token')
                if (token)
                    params2.token = token
                console.log(params2)
                get_comments_get(params2).then(resp => {
                    this.comment_list = resp.data
                })
            })
        },

        // 切换分类
        change_type() {
            if (this.type_selected === 'report') {
                let params = {
                    cid: this.$route.query.id
                }
                report_list_get(params).then(resp => {
                    this.reportlist = resp.reportlist
                    console.log(this.reportlist)
                })
            }
        },

        // 获取学习状态
        get_lean_msg() {
            let token = localStorage.getItem('token');
            let cid = this.$route.query.id
            if (token) {
                user_lean_get({
                    token: token,
                    cid: cid
                }).then(res => {

                    for (var i = 0; i < res.data.length; i++) {
                        this.learn_list.push(res.data[i].sid)
                    }
                })
            }
        }
    },
    filters: {
        learn_filter(num) {
            if (num) {
                return num
            } else {
                return 0
            }
        },
        exper_filter(value) {
            return value / 10
        },
        content_filter(value) {
            return value.length
        },

    }
}
</script>

<style>
</style>
